<template>
  <view>
    <view class="flex-col justify-start relative page">
  <view class="section"></view>
  <image
    class="image pos"
    src="@/static/bk1.png"
  />
  <text class="text pos_2">设备管理</text>
  <view class="flex-col justify-start section_2 pos_3">
    <view class="flex-col section_3">
      <text class="self-start text_2">设备接入</text>
      <view class="flex-col self-stretch mt-15">
        <view class="flex-col mt-16 list-item" v-for="(item, index) in items" :key="index">
          <text class="self-start font">xxxxxxxx设备</text>
          <view class="mt-8 flex-col self-stretch">
            <view class="flex-row justify-between self-stretch group">
              <view class="flex-row self-start">
                <text class="font_2">已接入</text>
                <text class="font_2 text_3 ml-7">绵阳-陪伴版</text>
              </view>
              <view class="flex-row group_2">
                <uni-swip-action></uni-swip-action>
                <image
                  class="image_2"
                  src="/static/but.png"
                />
                <image
                  class="ml-14 image_3"
                  src="/static/yes.png"
                />
              </view>
            </view>
            <view class="flex-row justify-evenly items-center self-start section_4">
              <image
                class="image_4"
                src="@/static/images/battry.png"
              />
              <text class="font_3">100%</text>
              <image
                class="image_5"
                src="@/static/images/wifi.png"
              />
              <text class="font_3">100%</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [null, null],
    };
  }
}
</script>

<style lang="scss" scoped>.mt-15 {
  margin-top: 30rpx;
}
.ml-7 {
  margin-left: 14rpx;
}
.page {
  background-color: #ffffff;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=6e2945838625982bcfcb647f8ea37508.png');
  background-position: 0% 0%;
  background-size: 750rpx 1624rpx;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=6e2945838625982bcfcb647f8ea37508.png');
  background-position: 0% 0%;
  background-size: 750rpx 1624rpx;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 1624rpx;
}
.image {
  border-radius: 50%;
  width: 52rpx;
  height: 52rpx;
}
.pos {
  position: absolute;
  left: 33rpx;
  top: 103rpx;
}
.text {
  color: #000000;
  font-size: 32rpx;
  font-family: Source Han Sans SC;
  line-height: 29.96rpx;
}
.pos_2 {
  position: absolute;
  right: 302.22rpx;
  top: 116.8rpx;
}
.section_2 {
  padding: 4rpx 0;
  border-radius: 48rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=68f78178a82ebc38ed7d8cf400620105.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos_3 {
  position: absolute;
  left: 34rpx;
  right: 26rpx;
  top: 320rpx;
}
.section_3 {
  padding: 36rpx 28rpx 26rpx;
  background-color: #ffffff;
  border-radius: 48rpx;
}
.text_2 {
  color: #333333;
  font-size: 36rpx;
  font-family: Source Han Sans SC;
  line-height: 33.62rpx;
}
.list-item {
  padding: 28rpx;
  background-color: #f3eedf;
  border-radius: 16rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.font {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 26.16rpx;
  color: #333333;
}
.group {
  padding: 0 4rpx;
}
.font_2 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.1rpx;
  color: #666666;
}
.text_3 {
  line-height: 22.34rpx;
}
.group_2 {
  margin-right: 12rpx;
}
.image_2 {
  border-radius: 52rpx;
  width: 76rpx;
  height: 40rpx;
}
.image_3 {
  border-radius: 50%;
  width: 41rpx;
  height: 41rpx;
}
.section_4 {
  padding: 0 12rpx;
  background-color: #fffbf1;
  border-radius: 8rpx;
  width: 220rpx;
}
.image_4 {
  width: 36rpx;
  height: 36rpx;
}
.font_3 {
  font-size: 20rpx;
  font-family: Source Han Sans SC;
  line-height: 15.18rpx;
  color: #999999;
}
.image_5 {
  width: 28rpx;
  height: 20.78rpx;
}</style>
    
      